<%@ page import="icom.icss.entity.User" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="青岛海尔集团产品官方网站，提供海尔智慧家庭智能家电全套解决方案，
			海尔冰箱、海尔空调、海尔洗衣机、海尔电视、海尔热水器、海尔厨电、海尔厨房、海尔电脑、海尔手机、海尔生活家电、
			海尔智能电器等最新最全产品信息发布查询及排行榜，会员权益、优惠活动、购买渠道选择、售后服务、网上报修等一站式体验。">
		<meta name="keywords" content="海尔,海尔官网,海尔智慧家庭,海尔智慧家电,海尔官网首页,海尔电器,海尔电器官网,海尔集团,海尔集团官网,青岛海尔,青岛海尔官网,海尔售后,haier,海尔服务">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>海尔官网|你的生活智慧，我的智慧生活</title>
		<!-- 加载bootstrap与jQuery -->

		<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css" />



		<script type="text/javascript" src="js/jquery.min.js"></script>
		<!-- 加载BootStrap脚本-->
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript">
			$(function() {

				//读取JSON文件，向页面中渲染商品数据
				//data就代表json中的数据
				$.get("shop.json", function(data) {
					//each : 代表遍历
					/**
					 * i:代表数组下标
					 * o:代表当前正在迭代的对象
					 * 
					 * 
					</div>
					$("#show_content").append("<a href='" + data.goodsurl + "'><p>" + img + goods_name + goods_price + "</p></a>") ;
					 */
					$(data).each(function(i, o) {
						//1. 建立图片显示节点
						var img_tv = '<img class="img-responsive" src="' + o.img + '" />';
						//2. 商品名称
						var title_tv = '<h3 class="goods_name">' + o.name + '</h3>';
						//3. 卖点
						var sellpoint_tv = '<p class="goods_sellpoint">' + o.model + '</p>';
						//4. 价格
						var price_tv = '<p class="goods_price">' + o.price + '元</p>';
						//5.加入购物车
						var buy_tv = '<a class="goods_buy" id="change" href="shopcar.jsp">'+o.buy +'</a>';
			
						//拼接一个商品的完整节点
						var full_tv ='<a href="'+ o.sur +'" style="text-decoration:none ;"><div class="col-md-3 padding_content goods">'+ img_tv + title_tv + sellpoint_tv + price_tv + buy_tv +'</div></a>';
						// //  购物车判断
                       // document.getElementById("username").innerHTML = sessionStorage.getItem("username");
					   // var username= sessionStorage.getItem("username");
					   
						//5.将完整节点放到商品所在行中
						$("#goodslist").append(full_tv);
					});
				});

			});
		</script>
		<!-- 倒计时功能 -->
		<script type="text/javascript">
			$(function() {
				// 建立日期对象
				var countDownDate = new Date("Apr 30, 2021 17:30:00").getTime();

				// 每一秒更新一次倒计时
				var x = setInterval(function() {

					// 获取日期
					var now = new Date().getTime();

					// 找出现在和倒数日期之间的距离
					var distance = countDownDate - now;

					// 天、小时、分钟和秒的时间计算
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);

					// 将结果输出到id=“jishi”的元素中
					document.getElementById("jishi").innerHTML = days + "天 " + hours + "小时" +
						minutes + "分 " + seconds + "秒";

					// 如果倒计时结束显示的内容 
					if (distance < 0) {
						clearInterval(x);
						document.getElementById("jishi").innerHTML = "快乐来了";
					}
				}, 1000);
				
				
				
			});
		</script>
		<!-- 视频自动播放 -->
		<script type="text/javascript">
			$(function() {
				myVid = document.getElementById("video");
				myVid.autoplay = true;
				myVid.load();
			});
		</script>
	</head>
	<body>
		<!-- 导航栏 -->
		<div class="container">
			<div class="row" style=" padding: 10px;padding-left: 0px;">
				<div class="col-md-1" style="padding: 10px; ">
					<a href="index.jsp"><img src="img/haier2020_logo.webp" width="80px" height="45px"></img></a>
				</div>
				<div class="col-md-5" style="padding: 2px;">
					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
							 style="color: #000000;"><strong>智慧家庭</strong>
								<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">电视</a></li>
								<li><a href="#">冰柜</a></li>
								<li><a href="#">洗衣机</a></li>
								<li><a href="#">空调</a></li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
							 style="color: #000000;"><strong>商用解决方案</strong>
								<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="U-home.html">U-home</a></li>
								<li><a href="#">商用冷柜</a></li>
								<li><a href="#">商用电视</a></li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
							 style="color: #000000;"><strong>购买与服务</strong>
								<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="page" >会员才可以点</a></li>
								<li><a href="#">你不可以</a></li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
							 style="color: #000000;"><strong>关于海尔</strong>
								<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="about.html">海尔品牌</a></li>
								<li><a href="#">投资者关系</a></li>
								<li><a href="#">品牌资讯</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="col-md-offset-2 col-md-2" style="padding: 2px;text-align: right; margin-top: 15px;">
					<a href="shopcar.jsp"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true" style="font-size: 25px;color: #000000;"></span></a>
				</div>
				<div id="headtext"; class="col-md-2" style="padding: 2px;text-align: center;margin-top: 15px;">
                    <c:if test="${!empty userLogin}">
						<a style="text-decoration: none" href="log_in.jsp"><span class="glyphicon glyphicon-user" aria-hidden="true" style="font-size: 25px;color: #000000;"></span>&nbsp;&nbsp;&nbsp;&nbsp;</a><span style="color: #e4b9b9; font-size:large" >${userLogin.username}</span>&nbsp;&nbsp;&nbsp;<a style="text-decoration: none" href="logOut">退出</a>
					</c:if>
					<c:if test="${empty userLogin}">
						<a href="log_in.jsp"><span class="glyphicon glyphicon-user" aria-hidden="true" style="font-size: 25px;color: #000000;">&nbsp;</span></a>
					</c:if>
				</div>
			</div>
		</div>
		<!-- 轮播图 -->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				<li data-target="#carousel-example-generic" data-slide-to="3"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="img/lb1.webp" alt="升级智慧鸟">
					<div class="carousel-caption">
						<span>选择海尔值得您信赖</span>
					</div>
				</div>
				<div class="item">
					<img src="img/lb2.webp" alt="健康家电">
				</div>
				<div class="item">
					<img src="img/lb3.webp" alt="健康智慧家冠军">
				</div>
				<div class="item">
					<img src="img/lb4.webp" alt="海尔智家数字体验馆">
				</div>
			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!-- 文字简述 -->
		<div class="container">
			<div class="row">
				<div class="col-md-2" align="right">
					<h3><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>&nbsp;&nbsp;限时秒杀</h3>
				</div>
				<div class="col-md-8" align="center">
					<h3><span class="glyphicon glyphicon-fire" aria-hidden="true"></span>&nbsp;&nbsp;热卖精品</h3>
				</div>
				<div class="col-md-2" align="left">
					<h3><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;&nbsp;新品推荐</h3>
				</div>
			</div>
		</div>
		<!-- 商品栏 -->
		<div class="container">
			<div class="row">
				<div class="col-md-2 ms">
					<div>
						<h1>海尔秒杀</h1>
						<p style="font-size: 50px;"><span class="glyphicon glyphicon-flash" aria-hidden="true"></span></p>
						<p>20点场限时秒杀</p>
						<p>倒计时</p>
						<p id="jishi" class="jishi"></p>
					</div>
				</div>
				<!-- 加入json商品 -->
				<div class="col-md-8" id="goodslist">
					
				</div>
				<!-- 最右侧小轮播图 -->
				<div class="col-md-2" id="lbb">
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						<!-- Indicators -->
						<ol class="carousel-indicators">
							<li data-target="#carousel-example-generic" data-slide-to="5" class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="6"></li>
							<li data-target="#carousel-example-generic" data-slide-to="7"></li>
						</ol>

						<!-- Wrapper for slides -->
						<div class="carousel-inner" role="listbox">
							<div class="item active">
								<img src="img/lbb1.png" alt="..." style="height: 285px;">
								<div class="carousel-caption">
									...
								</div>
							</div>
							<div class="item">
								<img src="img/lbb2.png" alt="..." style="height: 285px;">
								<div class="carousel-caption">
									...
								</div>
							</div>
							<div class="item">
								<img src="img/lbb3.png" alt="..." style="height: 285px;">
								<div class=" carousel-caption">
									...
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-12" align="center">
					<h1><span class="glyphicon glyphicon-film" aria-hidden="true"></span>&nbsp;&nbsp;品牌故事</h1>
					<p>三十多年来，海尔与时俱进，从产品品牌到平台品牌，<br>
						始终站在时代与行业发展前列。物联网时代，
						海尔生态品牌将持续为全球用户创造美好生活体验，成为全球生态品牌引领者。</p>
				</div>
			</div>
		</div>
		<!-- 视频 -->
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<video id="video" width="1130px" controls>
						<source src="img/haierStory.mp4" type="video/mp4">
						<source src="img/haierStory.ogg" type="video/ogg">
					</video>
				</div>
			</div>
		</div>
		<!-- 底部版权 -->
		<div class="container-fluid">
			<div class="row" style="background: rgba(37,38,39,.9); color: #FFFFFF; padding: 20px;">
				<div class="col-md-6 footer_font"  align="center">
					<a  href="https://www.haier.com/about_haier/jtjj/">关于海尔</a>
					&nbsp;|&nbsp;
					<a href="https://www.haier.com/contact/">联系我们</a>
					&nbsp;|&nbsp;
					<a href="https://www.haier.com/cn/terms_conditions/">法律声明</a>
					&nbsp;|&nbsp;
					<a href="https://www.haier.com/help/">帮助中心</a>
					&nbsp;|&nbsp;
					<a  href="https://www.haier.com/store.shtml">海尔门店</a>
				</div>
				<div class="col-md-6" align="center">
					<span>鲁ICP备09096283</span><span>Copyright 2020 海尔集团 版权所有</span>
				</div>
			</div>
		</div>
	</body>
</html>
